﻿<div>
    <h1>使用集合</h1>
    <div class="well">
        <h3>居民</h3>
        <label><input data-bind='checked: showRenderTimes' type='checkbox' /> 显示渲染时间戳</label>
        <ul data-bind="foreach: people">
            <li>
                <div>
                    <span data-bind="text: name"> </span> 有 <span data-bind='text: children().length'>&nbsp;</span> 孩子:
                    <a href='#' data-bind='click: addChild'>添加孩子</a>
                    <span class='renderTime' data-bind='visible: $root.showRenderTimes'>
                        (大人渲染在<span data-bind='text: new Date().getTime()'> </span>)
                    </span>
                </div>
                <ul data-bind="foreach: children">
                    <li>
                        <span data-bind="text: $data"> </span>
                        <span class='renderTime' data-bind='visible: $root.showRenderTimes'>
                            (孩子渲染在 <span data-bind='text: new Date().getTime()'> </span>)
                        </span>
                    </li>
                </ul>
            </li>
        </ul>

    </div>
</div>